<template>
  <div class="video">
    <video
      ref="videoPlayer"
      class="video-js vjs-default-skin video"
      controls
      crossorigin="anonymous"
      :src="videoSrc"
    ></video>
  </div>
</template>

<script>
import videojs from "video.js";
import "./dist/videojs-vr";
import "video.js/dist/video-js.css";
import "videojs-vr/dist/videojs-vr.css";
import { getVideoList } from "@/api/data";
export default {
  name: "Video",
  data() {
    return {
      player: null,
    };
  },
  computed: {
    videoSrc() {
      return this.$store.getters.videoSrc;
    },
  },
  created() {
    if (!this.videoSrc) {
      this.$modal.msgError("未选择播放视频！");
    } else {
      this.$nextTick(() => {
        this.initPlayer();
      });
    }
  },
  beforeDestroy() {
    this.$store.commit("SET_VIDEO_SRC", null);
    // 在组件销毁前，销毁播放器实例
    if (this.player) {
      console.log("销毁前", this.player);
      this.player.dispose();
      console.log("销毁后", this.player);
    }
  },
  methods: {
    initPlayer() {
      // 初始化 Video.js 播放器实例
      let player = null;
      player = videojs(this.$refs.videoPlayer);
      player.mediainfo = player.mediainfo || {};
      this.player = player;
    },
  },
};
</script>

<style scoped lang="scss">
.video {
  width: 100%;
  height: 100%;
  .video-js {
    width: 100%;
    height: 100%;
  }
}
</style>
